<template>
  <div class="change-user-img">
    <form class="form">
      <div class="avatar">
        <img :src="imgSrc" />
      </div>
      <div class="select">
        <span @click="selectFile">选择头像</span>
      </div>
      <div class="input-item submit">
        <el-button :loading="loadding" @click="upload" class="submit-btn" type="primary">保存</el-button>
        <el-button @click="close" class="submit-close-btn" plain>取消</el-button>
      </div>
      <input @change="changeImg" ref="file" style="display:none" type="file" id="file" />
    </form>
  </div>
</template>
<script>
import { Button } from "element-ui";
import { changeUserImg } from "@/api/common";
export default {
  components: {
    ElButton: Button
  },
  data() {
    return {
      imgSrc: "",
      file: "",
      loadding: false
    };
  },
  methods: {
    close() {
      this.$emit("close-changeUserImg");
    },
    changeImg(e) {
      let file = e.target.files[0];
      this.file = file;
      let reader = new FileReader();
      reader.onload = e => {
        this.imgSrc = e.target.result;
      };
      reader.readAsDataURL(file);
    },
    selectFile() {
      this.$refs.file.click();
    },
    upload(e) {
      e.preventDefault();
      let formData = new FormData();
      formData.append("file", this.file);
      this.loadding = true;
      changeUserImg(formData)
        .then(res => {
          this.loadding = false;
          console.log(res);
        })
        .catch(e => {
          this.loadding = false;
          console.loa(err);
        });
      // this.axios
      //   .post(`${this.config.apiUrl}img/upImg.php`, formData, config)
      //   .then(result => {
      //     console.log(result);
      //     this.$store.commit(
      //       "setUserImg",
      //       `http://${result.data.result.s_img}`
      //     );
      //     this.$refs.tip.style.color = "green";
      //     this.tip = "修改成功！";
      //     let timer = setTimeout(() => {
      //       clearTimeout(timer);
      //       this.$bus.$emit("showChangeImg");
      //     }, 1000);
      //   });
    }
  },
  created() {
    this.imgSrc = this.$store.state.teacher.userImg;
  }
};
</script>
<style lang="scss" scoped>
.change-user-img {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  background-color: rgba(0, 0, 0, 0.3);
}
.form {
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  background-color: #fff;
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  top: 30%;
  left: 50%;
  margin-left: -250px;
  width: 500px;
  height: 300px;
  .avatar {
    position: relative;
    border-radius: 50%;
    margin-top: 30px;
    overflow: hidden;
    width: 130px;
    height: 130px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .select {
    margin: 20px auto;
    span {
      cursor: pointer;
      font-size: 14px;
      color: #777;
      transition: all 0.2s;
      &:hover {
        color: #7bc457;
      }
    }
  }
  .submit {
    margin: 0;
    justify-content: center;
    .submit-btn {
      background-color: #409eff;
      border-color: #409eff;
      &:hover {
        background-color: rgb(111, 183, 255);
        border-color: rgb(111, 183, 255);
      }
    }
  }
}
</style>